<template>
  <div class="show">
    <div class="top">
      <div class="leftTop">
        <span
          :class="{
            'iconfont iconShow icon-shouqi1': ShowState,
            'iconfont iconShow icon-fold-right': !ShowState,
          }"
          @click="flexible"
        ></span>
      </div>
      <div class="centreTop">CRM系统</div>
      <div class="rightTop">
        <!-- <el-image
          style="width: 40px; height: 40px"
          :src="url"
          fit="fill"
        ></el-image> -->
        <el-image style="width: 40px; height: 40px" :src="url" fit="fill">
          <div slot="error" class="image-slot">
            <img
              style="width: 40px; height: 40px"
              src="../../assets/imgs/f0ee8a3c7c9638a54940382568c9dpng.png"
            />
          </div>
        </el-image>
        <div>
          <svg v-if="vipLevel == 3" class="icon icon-vip" aria-hidden="true">
            <use xlink:href="#icon-vip_3"></use>
          </svg>
          <svg
            v-else-if="vipLevel == 2"
            class="icon icon-vip"
            aria-hidden="true"
          >
            <use xlink:href="#icon-vip2"></use>
          </svg>
          <svg
            v-else-if="vipLevel == 1"
            class="icon icon-vip"
            aria-hidden="true"
          >
            <use xlink:href="#icon-vip"></use>
          </svg>
        </div>
        <el-dropdown placement="bottom" :hide-on-click="false">
          <span class="el-dropdown-link">
            <span
              v-if="vipLevel == 3 || vipLevel == 2 || vipLevel == 1"
              style="color: #f4c14f"
              id="nickname"
            ></span>
            <span v-else id="nickname" style="color: #fff"></span>
            <span class="iconfont icon-down"></span>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-if="vipExpires" divided>
              <div @click="vipTimeFn()">
                <span class="iconfont icon-VIP4"></span>
                vip到期时间：
                <div>{{ vipExpires }}</div>
              </div>
            </el-dropdown-item>
            <el-dropdown-item divided>
              <div @click="vipFn()">
                <span class="iconfont icon-VIP4"></span>
                vip充值
              </div>
            </el-dropdown-item>
            <el-dropdown-item divided>
              <div @click="AccountFn()">
                <span class="iconfont icon-icon-test"></span>
                账号信息
              </div>
            </el-dropdown-item>
            <el-dropdown-item divided>
              <div @click="ProjectFn()">
                <span class="iconfont icon-shangpinguanli"></span>
                项目管理
              </div>
            </el-dropdown-item>
            <el-dropdown-item divided>
              <div @click="delFn()">
                <span class="iconfont icon-tuichu2"></span>
                退出
              </div>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <div class="btm">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
        <el-breadcrumb-item>活动列表</el-breadcrumb-item>
        <el-breadcrumb-item>活动详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="bottom">
      <keep-alive>
        <router-view />
      </keep-alive>
    </div>
  </div>
</template>

<script>
// import { getQuitRegister } from "../../api/welcome";
import storage from "../../utils/storage";
export default {
  data() {
    return {
      exclude: "",
      ShowState: true,
      url: "",
      vipLevel: "",
      vipExpires: "",
    };
  },
  props: {
    MenuWidth: {
      type: Number,
      required: true,
    },
  },
  mounted() {
    this.ConLogFn();
    // this.onReload();
  },
  methods: {
    // onReload() {
    //   this.exclude = this.$route.componentName;
    //   console.log(this.$route.componentName);
    //   setTimeout(() => {
    //     this.refreshing = false;
    //     this.$nextTick(() => {
    //       this.exclude = "";
    //     });
    //   }, 200);
    // },

    async ConLogFn() {
      let userInfo = storage.get("userInfo");
      this.url = userInfo.headimgurl.toString();
      this.vipLevel = userInfo.vipLevel;
      this.vipExpires = userInfo.vipExpires;
      var date = new Date();
      let arr = date.getTime();
      console.log(arr);
      console.log(this.vipExpires);
      document.getElementById("nickname").innerHTML = userInfo.nickname;
      // console.log(this.url);
    },
    flexible() {
      this.ShowState = !this.ShowState;
      this.$emit("flexibleEvent");
    },
    delFn() {
      localStorage.removeItem("token");
      this.$router.push("/login");
      location.reload();
    },
    vipTimeFn() {
      this.$router.push("/vipmanager/charge");
    },
    vipFn() {
      this.$router.push("/vipmanager/charge");
    },
    AccountFn() {
      this.$router.push("/mine");
    },
    ProjectFn() {
      this.$router.push("/studentManager/product");
    },
  },
};
</script>

<style lang="less" scoped>
.show {
  flex: 1;
}
.top {
  background: #4f5af6;
  height: 60px;
  display: flex;
  .leftTop {
    width: 32%;
    height: 100%;
    display: flex;
  }
  /deep/ .iconShow {
    font-size: 34px;
    color: #fff;
    font-weight: bolder; //加粗
    cursor: pointer;
    align-self: center;
    margin-left: 25px;
  }
  .centreTop {
    width: 36%;
    height: 100%;
    color: #fff;
    font-size: 30px;
    font-weight: bolder; //加粗
    text-align: center;
    line-height: 60px;
  }
  .rightTop {
    width: 32%;
    height: 100%;
    line-height: 60px;
    display: flex;
    justify-content: center;
    .icon-vip {
      width: 80px;
      height: 24px;
    }
  }
}
.top .rightTop {
  line-height: 70px;
}
.el-image {
  // padding: 10px 0;
  // position: relative;
  // left: 30%;
  padding: 10px 10px 10px;
}
// .vip-icon {
//   width: 80px;
//   height: 24px;
//   padding-right: 10px;
// }
.el-dropdown {
  line-height: 60px;
  margin-left: 5px;
  // padding: 0 100px 0 0;
  // position: relative;
  // left: 45%;
  font-weight: bolder;
}
// /deep/ .el-dropdown {
//   line-height: 60px;
// }
.btm {
  width: 96%;
  height: 60px;
  margin: 20px;
}
.el-breadcrumb {
  line-height: 60px;
}
.bottom {
  width: 96%;
  // background: black;
  height: 80%;
  margin: 20px;
  overflow-y: auto;
}

.el-dropdown-link {
  cursor: pointer;
  color: #fff;
}
.el-dropdown-menu {
  width: 200px;
  background: #4f5af6;
  text-align: center;
}
.el-dropdown-menu__item--divided:before {
  height: 1px;
}
.el-dropdown-menu__item--divided {
  border: none;
}
.el-dropdown-menu__item:focus,
.el-dropdown-menu__item:not(.is-disabled):hover {
  // background-color: rgba(102, 177, 255, 0.5);
  background-color: #4f5af6;
  color: #66b1ff;
}
.el-dropdown-menu__item {
  color: #fff;
}
// .el-img {
//   width: 40px;
//   height: 40px;
// }
// .el-img > img {
//   height: 100%;
// }
</style>
